Validate Data

The wijgrid widget allows you to perform data validation by using beforeCellUpdate event. You can validate data entered in the cells while adding or updating records, and display an error pop-up in case of an invalid entry.

For example, the script below sets the editingMode to cell and selectionMode to single cell. You can edit and update data in grid columns. A switch case statement is used for data validation. Here, validation function is applied to column User_ID, which throws a javascript error if the value entered is not a number.

Live Widget
Script

Script	Copy Code
<script type="text/javascript"> $(document).ready(function () { $('#wijgrid').wijgrid({ data: [ { User_ID: '1', Name: 'John', Country: 'Japan' }, { User_ID: '2', Name: 'Tom', Country: 'US' }, { User_ID: '3', Name: 'Henry', Country: 'China' }, { User_ID: '4', Name: 'Lucy', Country: 'UK' }, { User_ID: '5', Name: 'Kim', Country: 'US' }, ], selectionMode: 'singleCell', editingMode: 'cell', //validate data beforeCellUpdate : function (e, args) { switch (args.cell.cellIndex()) { case 0: var editor = args.cell.container().find('input'); if (isNaN(editor[0].value)) { alert('Kindly enter a numeric value'); return false; } break; } } }); }); </script>

Script

Copy Code

<script type="text/javascript">
    $(document).ready(function () {
        $('#wijgrid').wijgrid({
            data: [
                { User_ID: '1', Name: 'John', Country: 'Japan' },
                { User_ID: '2', Name: 'Tom', Country: 'US' },
                { User_ID: '3', Name: 'Henry', Country: 'China' },
                { User_ID: '4', Name: 'Lucy', Country: 'UK' },
                { User_ID: '5', Name: 'Kim', Country: 'US' },
               
            ],
           
            selectionMode: 'singleCell',
            editingMode: 'cell',
            //validate data
            beforeCellUpdate : function (e, args) {
                switch (args.cell.cellIndex()) {
                    case 0:
                        var editor = args.cell.container().find('input');
                        if (isNaN(editor[0].value)) {
                            alert('Kindly enter a numeric value');
                            return false;
                        }
                        break;
                }
            }
        });
    });
</script>